<template>
  <el-form ref="formRouteScheme" :model="scheme" :label-width="$globalCss.formLabelWidth_default"
    :rules="formRulesRouteScheme">


    <el-form-item :label="$tt('label_tms_line_operation_project_name')" class="mg_t2" prop="schemeName">
      <ex_super_input v-model="scheme.schemeName" class="form_input_default" />
    </el-form-item>

    <div class="flex_row ">
      <el-form-item :label="$tt('label_tms_line_exit_port')" prop="outPortId">

        <place_select v-model="scheme.outPortId" class="form_input_default" :countryCode="originCountryCode"
          typeEnum="PORT_SHORE" @changeItem="e => scheme.outPortName = e ? e.placeName : null" />
      </el-form-item>

      <el-form-item :label="$tt('label_tms_line_port_entry')" prop="entryPortId">

        <place_select v-model="scheme.entryPortId" class="form_input_default" :countryCode="destinationCountryCode"
          typeEnum="PORT_SHORE" @changeItem="e => scheme.entryPortName = e ? e.placeName : null" />
      </el-form-item>
    </div>

    <el-row>
      <el-col :span="2">
        <el-form-item :label="$tt('label_tms_line_operation_project_remark')" prop="remark">
          <ex_super_input v-model="scheme.remark" class="form_input_default" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item :label="$tt('label_tms_line_transport_section')" prop="transportSegmentInfoParamList">

      <div class="flex_row">
        <div style="margin-top: 40px;">
          <div class="line-edit-row" v-for="item, index in routeSection">
            <div class="line-edit-row-point"></div>
            <div class="line-edit-row-line" v-if="index < routeSection.length - 1">
            </div>
            <div class="line-edit-row-title">{{ item.placeName }}</div>
          </div>
        </div>
        <div class="flex_cell flex_col">
          <el-table :data="scheme.transportSegmentInfoParamList" height="auto" class="flex_cell"
            :row-style="{ height: '55px' }">
            <el-table-column prop="transportSection" :label="$tt('label_tms_line_transport_section_type')" width="160"
              align="center" show-overflow-tooltip>
              <template v-slot="{ row, $index }">
                <ex_super_input v-model="row.transportSection" class="w_fill" type='select'
                  :attrs="{ enum: 'TransportSectionEnum', }" />
              </template>
            </el-table-column>
            <el-table-column prop="transportModel" :label="$tt('label_tms_line_transport_mode')" width="160"
              align="center" show-overflow-tooltip>
              <template v-slot="{ row }">
                <ex_super_input v-model="row.transportModel" class="w_fill" type='select'
                  :attrs="{ enum: 'LogisticsProductsTypeEnum', }" />
              </template>
            </el-table-column>
            <el-table-column prop="loadingMode" :label="$tt('label_tms_line_load_mode')" width="160" align="center"
              show-overflow-tooltip>
              <template v-slot="{ row }">

                <ex_super_input v-model="row.loadingMode" class="w_fill" type='select' :attrs="{
                  enum: 'LoadingModeEnum'
                }" />
              </template>
            </el-table-column>
            <el-table-column prop="prescription" :label="$tt('label_tms_line_aging')" width="160" align="center"
              show-overflow-tooltip>
              <template v-slot="{ row }">
                <el-input-number class="w_fill" v-model="row.prescription" :min="0"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="carrierName" :label="$tt('label_tms_line_carrier_matching')" width="240"
              align="center" show-overflow-tooltip>
              <template v-slot="{ row }">
                <ex_super_input class="w_fill" v-model="row.carrierId" type='select' :attrs="{
                  url: '/srm-api/supplier/SupplierRpc/getSupplierDict.json',
                  listHandler: e => e.map(it => {
                    it.disabled = it.status === 'DISABLED'
                    return it
                  }),
                  storeData: true,
                  option: { label: 'supplierName', value: 'supplierId' },
                }" @changeItem="e => row.carrierName = e ? e.supplierName : ''" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-form-item>

  </el-form>
</template>


<script>
import place_select from '@/component/tms/place_select'
export default {
  components: { place_select, },
  data() {
    return {
      formRulesRouteScheme: {
        schemeName: { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' },
        transportSegmentInfoParamList: {
          required: true, type: "array",
          trigger: 'change', validator: (r, v, cb) => {
            if (v.length <= 0) {
              return cb(this.$tt('至少需要1个运输段'))
            }
            if (v.some(it => !it.transportSection)) {
              return cb(this.$tt('请选择运输段类型'))
            }
            if (v.some(it => !it.transportModel)) {
              return cb(this.$tt('请选择运输模式'))
            }
            if (v.some(it => !it.carrierId)) {
              return cb(this.$tt('请选择服务商匹配'))
            }
            if (v.some(it => !this.$reg.PureNumberLetter(it.prescription))) {
              return cb("运输时效" + this.$tt('tip_only_positive_pure_decimal'))
            }
            // if (_.reduce(v, (r, it) => this.$math_add(r, Number(it.prescription)), 0) > Number(this.prescription)) {
            //   return cb("运输段时效不能大于总运输时效")
            // }
            cb()
          }
        },
      },
    }
  },
  props: {
    prescription: {
      type: [String, Number],
      default: '',
    },
    originCountryCode: {
      type: String,
      default: '',
    },
    destinationCountryCode: {
      type: String,
      default: '',
    },
    scheme: {
      type: Object,
      default: () => { },
    },
    routeSection: {
      type: Array,
      default: () => [],
    },
  },

  methods: {
    validate(call) {
      this['$refs']['formRouteScheme'].validate(call);
    }

  },
}
</script>
<style scoped>
.line-edit-row {
  position: relative;
  height: 55px;
}

.line-edit-row-title {
  text-align: right;
  line-height: 16px;
  margin-right: 22px;
}

.line-edit-row-point {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #e4e7ed;
  border-radius: 50%;
  right: 0;
  margin-top: 2px;
}

.line-edit-row-line {
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: #e4e7ed;
  top: 10px;
  right: 6px;
}

.line-edit-row-form {
  position: absolute;
  width: 930px;
  left: 258px;
  top: 22px;
}

.line-edit-row-form .line-edit-row-form-line {
  display: flex;
  line-height: 36px;
  height: 36px;
  width: 100%;
}

.line-edit-row-form .line-edit-row-form-line .line-edit-row-form-col {
  width: 160px;
  text-align: center;
  margin-right: 10px;
}
</style>
